<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      :background="0"
    ></van-nav-bar>
    <div class="csOne-video">
      <!-- <div class="cs-video"></div> -->
      <video autoplay controls :src="video.filepath" class="cs-video"></video>
    </div>
    <!-- 视频课程 图文详解 -->
    <div class="teaching_video">
      <van-tabs v-model="active">
        <van-tab title="视频课程">
          <div class="cardSchool">
            <!-- 倒车入库 -->
            <div class="vs-title">
              <div>
                <p>{{ video.title }}</p>
                <div>{{ video.djl }}人观看</div>
              </div>
              <!-- <div>
          <img src="../../assets/images/16.png" alt />
          <div>14.1W</div>
        </div> -->
            </div>
            <div class="practiceDriving">
              <p>预约练车</p>
              <div @click="href('/TaxiHailing')">去预约</div>
            </div>
            <!-- 课程目录 -->
            <!-- 课程目录 -->
            <div class="course-catalogue">
              <div class="coures-catalogue border-bottom">
                <div class="cs-catalog">
                  <div>
                    <img src="../../assets/images/59 (1).png" alt />
                    <p>课程目录</p>
                  </div>
                  <div @click="href('/TestVideo')">
                    <p>更多</p>
                    <img src="../../assets/images/05.png" alt />
                  </div>
                </div>

                <div class="vc-catalogue">
                  <div class="vc-scroll">
                    <div
                      v-for="(item, index) in lists"
                      :key="index"
                      @click="substitute(item.filepath, item.title, item.djl)"
                    >
                      <img :src="item.picaddress" alt />
                      <!-- <div>{{ item.play }}</div> -->
                      <p>{{ item.time }}</p>
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 驾考秘籍 -->
            <div class="course-catalogue">
              <div class="coures-catalogue">
                <div class="cs-catalog">
                  <div>
                    <img src="../../assets/images/59 (2).png" alt />
                    <p>驾考秘籍</p>
                  </div>
                  <div @click="href('/Esoterica')">
                    <p>更多</p>
                    <img src="../../assets/images/05.png" alt />
                  </div>
                </div>
                <!-- 内容 -->
                <div
                  class="vc-content border-bottom"
                  v-for="(item, index) in content"
                  :key="index"
                  @click="href('/SecretDetails', item.id)"
                >
                  <p class="vc-title">{{ item.title }}</p>
                  <div>
                    <p>{{ item.createTime }}</p>
                    <p>已有{{ item.djl }}阅读</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- end -->
            <!-- 讨论区 -->
            <div class="course-catalogue">
              <div class="coures-catalogue">
                <div class="cs-catalog">
                  <div>
                    <img src="../../assets/images/59 (3).png" alt />
                    <p>讨论区</p>
                  </div>
                </div>
                <div
                  class="cs-forum"
                  v-for="(item, index) in forum"
                  :key="index"
                >
                  <img :src="item.userimg" alt />
                  <div>
                    <p>{{ item.userId }}</p>
                    <div>{{ item.remork }}</div>
                  </div>
                  <div>
                    <!-- <img src="../../assets/images/16.png" alt /> -->
                    <!-- <p>{{ item.dzl }}</p> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="sd-input">
            <input type="text" v-model="centent" placeholder="说点什么吧~" />
            <div>
              <div @click="announce" class="sd-announce">发表</div>
            </div>
            <div @click="cancel" class="sd-cancel">取消</div>
          </div>
          <!-- <div class="cs-input">
      <input type="text" placeholder="有什么问题，直接抛给我" />
    </div> -->
        </van-tab>
        <van-tab title="图文讲解">
          <div class="imageText">
            <div v-html="video.twjj"></div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  VideoDetails,
  ExamVideo,
  CardCheats,
  CardReview,
  driverComments
} from "../../assets/js/api/exam";
import { Toast } from "vant";
export default {
  name: "TeachingVideo",
  data() {
    return {
      active: "1",
      video: "",
      lists: [],
      centent: "", // 评论内容
      content: [],
      // 讨论区
      forum: []
    };
  },

  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
    // 驾考秘籍
    CardCheats(this.$route.params.type).then(res => {
      // console.log(res);
      this.content = res.data;
    });

    VideoDetails(this.$route.params.type, this.$route.params.id).then(res => {
      // console.log(res);
      this.video = res.data.videoInfo;
    });
    ExamVideo(this.$route.params.type, "1").then(res => {
      if (res.code == 0) {
        for (let i = 0; i < res.data.length; i++) {
          this.lists.push(res.data[i]);
        }
      }
      // console.log(this.lists);
    });

    // 评论区
    CardReview(this.$route.params.id).then(res => {
      // console.log(res);
      for (let i = 0; i < 10; i++) {
        this.forum.push = res.data[i];
      }
      this.forum = res.data;
    });
  },

  methods: {
    cancel() {
      this.centent = "";
    },

    announce() {
      if (this.centent == "") {
        Toast("评论内容不能为空");
        return;
      }
      // console.log(this.value);
      let obj = {
        pid: this.$route.params.id,
        remork: this.centent
      };
      // console.log(obj);
      driverComments(obj).then(res => {
        // console.log(res);
        // console.log("参数" + obj.pid, obj.remork);
        if (res.code == 0) {
          // location.reload();
          this.centent = "";
          Toast.success("发表成功");
          CardReview(this.$route.params.id).then(res => {
            // console.log(res);
            for (let i = 0; i < 10; i++) {
              this.forum.push = res.data[i];
            }
            this.forum = res.data;
          });
          // alert("发表成功");
        }
      });
    },

    substitute(video, title, djl) {
      this.video.filepath = video;
      this.video.title = title;
      this.video.djl = djl;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    href(url, id) {
      if (url == "/Esoterica") {
        this.$router.push({ path: url + "/" + this.$route.params.type });
        return;
      }
      if (url == "/TestVideo") {
        this.$router.push({ path: url + "/" + this.$route.params.type });
        return;
      }
      if (url == "/SecretDetails") {
        this.$router.push({ path: url + "/" + id });
        return;
      }
      this.$router.push({ path: url });
    }
  }
};
</script>

<style></style>
